
<template >
  <!-- Back to top button -->
    <AppLayout>
  <div class="page-banner overlay-dark bg-image" :style="backgroundImageStyle">
    <div class="banner-section">
      <div class="container text-center wow fadeInUp">
        <nav aria-label="Breadcrumb">
          <ol class="breadcrumb breadcrumb-dark bg-transparent justify-content-center py-0 mb-2">
            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Project</li>
          </ol>
        </nav>
        <h1 class="font-weight-normal">Our ProjectCL</h1>
      </div> <!-- .container -->
    </div> <!-- .banner-section -->
  </div> <!-- .page-banner -->

  <div class="page-section bg-light">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-10">

          <div class="row">
            <div
              class="col-md-6 col-lg-4 py-3 wow zoomIn"
              v-for="doctor in paginatedData"
              :key="doctor.id"
              @click="goToDetails(doctor)"
            >
              <div class="card-doctor">
                <div class="header">
                  <image-preview class="doctor-image" :src="doctor.tupian" />
                  <div class="meta">
                    <a href="#"><span class="mai-call"></span></a>
                    <a href="#"><span class="mai-logo-whatsapp"></span></a>
                  </div>
                </div>
                <div class="body">
                  <p class="text-xl mb-0">{{ doctor.xiangmumingcheng}}</p>
<!--                  <span class="text-sm text-grey">{{ doctor.specialty }}</span>-->
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div> <!-- .container -->
    <nav aria-label="Page navigation">
      <ul class="pagination justify-content-center"> <!-- 这里添加 justify-content-center -->
        <li class="page-item" :class="{ disabled: currentPage === 1 }">
          <a class="page-link" href="#" aria-label="Previous" @click.prevent="changePage(currentPage - 1)">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="page-item"
            v-for="page in totalPages"
            :key="page"
            :class="{ active: currentPage === page }">
          <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
        </li>
        <li class="page-item" :class="{ disabled: currentPage === totalPages }">
          <a class="page-link" href="#" aria-label="Next" @click.prevent="changePage(currentPage + 1)">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
    <!--尾部-->
    </AppLayout>

</template>

<style scoped lang="scss">
.doctor-image {
  width: 100%; /* 宽度填充包含容器 */
  height: 100%; /* 高度填充包含容器 */
  object-fit: fill; /* 强制图片填充整个容器，不考虑它的原始比例 */
}
</style>

<script>
import "../static/css/reset.css";
import "../static/css/style.css";
import AppLayout from '../Layout1.vue';
import '../static/vendor/animate/animate.css';
import '../static/css/theme.css';
import '../static/css/maicons.css';
import { listMedicalInfo } from "@/api/medicalInfo/medicalInfo";
import 'bootstrap/dist/css/bootstrap.css'
import { getUser } from "@/api/system/user";
import 'font-awesome/css/font-awesome.min.css'
import ProjectCL from "@/views/ProjectCL/ProjectCL/index.vue";
export default {
  beforeRouteEnter(to, from, next) {
    document.body.style.overflow = ''; // 进入路由前重置滚动
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 离开路由时重置滚动
    document.body.style.overflow = '';
    next();
  },
  components: {
    ProjectCL,
    AppLayout,
  },
  data() {
    return {
      // 注意：这里的路径假设图片放置在 'src/assets/img/' 目录中
      backgroundImage: require('@/views/static/img/bg_image_1.jpg'),
      doctors: [], // 在mounted中获取,
      currentPage: 1,
      perPage: 6,
    };
  },
  computed: {
    backgroundImageStyle() {
      return {
        backgroundImage: `url(${this.backgroundImage})`
      };
    },
    paginatedData() {
      let start = (this.currentPage - 1) * this.perPage;
      let end = start + this.perPage;
      return this.doctors.slice(start, end);
    },
    // 计算总页数
    totalPages() {
      return Math.ceil(this.doctors.length / this.perPage);
    },
  },
  methods: {
    getList() {
      // this.loading 没在 data 中定义，请确保已正确定义或删除此行
      // this.loading = true;
      listMedicalInfo(this.queryParams).then(response => {
        this.doctors = response.rows;
        // this.loading = false;
      }).catch(error => {
        console.error("获取医生列表失败:", error);
        // this.loading = false;
      });
    },
    getImagePath(imageName) {
      return `./static/img/doctors/${imageName}`;
    },
    changePage(page) {
      if (page < 1 || page > this.totalPages) {
        return;
      }
      this.currentPage = page;
    },
    goToDetails(doctor) {
      this.$router.push({ path: `/projectD/${doctor.id}` });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
